<template>
  <div class="recordDetail">
    <Navbar appTitle="工单详情" />
    <!--头部-->
    <div class="d-heads">
      <div class="content">
        <div class="left">
          <div class="title">{{ detailInfo.orderCode || "-" }}</div>
          <!-- <div class="row limitRow margin-t-20">
            <span class="r-label limitLabel">{{ detailInfo.orderCode || "-"  }}</span>
          </div> -->
          <!--  -->
          <div class="row limitRow">
            <span class="r-label limitLabel">生产物料：</span>
            <span class="r-column r-column-color"
              >{{ detailInfo.serialNumber || "-" }} |
              {{ detailInfo.serialName || "-" }} |
              {{ detailInfo.serialSpecifications || "-" }}</span
            >
          </div>

          <div class="row limitRow margin-t-20">
            <span class="r-label limitLabel">单位：</span>
            <span class="r-column r-column-color">{{ detailInfo.unitName || "-" }}</span>
          </div>

          <div class="row limitRow margin-t-20">
            <span class="r-label limitLabel">计划时间：</span>
            <span class="r-column r-column-color"
              >{{ detailInfo.timePeriod || "-" }}</span
            >
          </div>

          <div class="row limitRow margin-t-20">
            <span class="r-label limitLabel">计划生产数量：</span>
            <span class="r-column r-column-color">{{ detailInfo.planProduceNum || 0 }}</span>
          </div>

          <div class="row limitRow margin-t-20">
            <span class="r-label limitLabel">关联订单：</span>
            <span class="r-column r-column-color">{{ detailInfo.sellOrderCode || "-" }}</span>
          </div>

          <div
            class="status"
            :style="{
              color: orderStatusFn(detailInfo.orderStatus).color,
              backgroundColor: orderStatusFn(detailInfo.orderStatus).bcColor,
            }"
          >
            {{ orderStatusFn(detailInfo.orderStatus).text }}
          </div>
        </div>
      </div>


      <div style="background: #fff">
        <div class="tabs-box-width">
          <van-tabs
            class="tabs-style"
            v-model="active"
          >
          <van-tab title="任务信息"> </van-tab>
          <van-tab title="自定义信息"> </van-tab>
          <van-tab title="生产报工"> </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
    <!-- taps-->
    <div class="tabs-f">

      <!-- 任务信息 -->
      <div class="goodsWrap" v-if="active == 0">
          <div class="goodsList" v-if="taskList.length > 0">
            <div class="goodsBox" v-for="(item, index) in taskList" :key="index">
              <div class="content">
                <div class="icon"></div>
                <div class="right">
                  <div class="top">
                    <p class="code">
                      {{ item.processesName || '-' }}
                    </p>
                  </div>
                  <div class="numList">
                    <div class="item">
                      <p class="ikey">计划数</p>
                      <p>{{ item.planNum }}</p>
                    </div>
                    <div class="item">
                      <p class="ikey">合格数</p>
                      <p>{{ item.qualifiedNum }}</p>
                    </div>
                    <div class="item noBorder">
                      <p class="ikey">不合格数</p>
                      <p>{{ item.unqualifiedNum }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <van-empty v-else description="任务信息为空" />
        </div>
  
        <div class="goodsWrap" v-if="active == 1">
          <!-- 自定义信息 -->
          <div class="otherTaps" v-if="detailInfo.extDataJson.length > 0">
            <div class="content">
              <div
                class="row no-margin-top"
                v-for="(item, index) in detailInfo.extDataJson"
                :key="index"
              >
                <span class="r-label">{{item.fieldName}}：</span>
                <span class="r-column"> {{ item.fieldValue || "-" }} </span>
              </div>
            </div>
          </div>
          <van-empty v-else description="自定义信息为空" />
        </div>

        <div class="goodsWrap" v-if="active == 2">
          <div class="goodsList" v-if="artisanList.length > 0">
            <div
              class="goodsBox"
              v-for="(item, index) in artisanList"
              :key="index"
            >
              <div class="content pading-btm-0">
                <div class="icon"></div>
                <div class="right">
                  <div class="top">
                    <p class="code">
                      {{ item.userText || "-" }} | {{ item.processesName || "-" }}
                    </p>
                  </div>
                  <div class="rt-row no-margin-top">
                    <div class="column">
                      <span class="column-t">合格数：</span>
                      <span class="column-c r-column-color">{{ item.qualifiedNum || 0 }}</span>
                    </div>
                  </div>
                  <div class="rt-row margin-t-20">
                    <div class="column">
                      <span class="column-t">不合格数：</span>
                      <span class="column-c r-column-color">{{ item.unqualifiedNum || 0 }}</span>
                    </div>
                  </div>
  
                  <div class="rt-row margin-t-20">
                    <div class="column">
                      <span class="column-t">报工时间：</span>
                      <span class="column-c r-column-color">{{ item.reportTime || "-" }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <van-empty v-else description="生产报工为空" />
        </div>
    </div>
    <!-- <div class="search-bottom" v-if="apply">
      <span class="btncancel" @click="cancel">拒绝</span>
      <span class="btnconfirm" @click="confirm">同意</span>
    </div> -->
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import Examine from "@/components/examine";
import { getAction, postAction } from "@/api/manage";
import { apiBaseUrlDownload } from "@/utils/request";
import { APILX } from "@/api/requestLx";
import { formTypeExtendedFieldList } from "@/api/mobile";
const getFileListByIds = (params) =>
  getAction("/sys/common/getFileListByIds", params);
export default {
  name: "customerDetail", //客户详情
  components: { Navbar, Examine },
  data() {
    return {
      taskList: [],
      artisanList: [],
      resultInfo: {
        reportCountNum: 0,
        unqualifiedCountNum: 0,
        qualifiedCountNum: 0,
      },
      orderList: [],
      abnormalList: [],
      normalList: [],
      allList: [],
      tabAbNormal: "0",
      tabNormal: "0",
      active: 0,
      detailInfo: {
        extDataJson: [],
      },
      formTypeExtendedFields: [],
      title: this.$route.meta.title,
      fileIds: "",
      imgUrlList: [],
    };
  },
  computed: {},
  mounted() {},
  created() {
    // this.detailInfo = this.$route.query.item
    this.getDetail();
  },
  methods: {
    orderStatusFn(v) {
      if (v == 0) {
        return {
          text: "未开始",
          color: "#ff9900",
          bcColor: "#fff5e6",
        };
      } else if (v == 1) {
        return {
          text: "生产中",
          color: "#2B85E4",
          bcColor: "#EAF3FC",
        };
      } else if (v == 2) {
        return {
          text: "已完成",
          color: "#19BE6B",
          bcColor: "#E8F9F0",
        };
      } else if (v == 3) {
        return {
          text: "已取消",
          color: "#ff9900",
          bcColor: "#fff5e6",
        };
      } else {
        return {
          text: "-",
          color: "#ff9900",
          bcColor: "#fff5e6",
        };
      }
    },
    cancel() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 0, taskId: this.$route.query.taskId },
      });
    },
    confirm() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 1, taskId: this.$route.query.taskId },
      });
    },
    // 获取详情
    async getDetail() {
      // 获取报工自定义表单字段;
      await formTypeExtendedFieldList({ formType: 3 }).then((res) => {
        if (res.code == 200 && res.result) {
          this.formTypeExtendedFields = res.result;
        }
      });

      let id = this.$route.query.taskId;
      APILX.produceOrderInfoQueryById({ id }).then((res) => {
        if (res.code == 200 && res.result.records.length != 0) {
          this.detailInfo = res.result.records[0];

          for (const item in this.detailInfo.extDataJson) {
            this.formTypeExtendedFields.map((ele) => {
              if (ele.fieldKey == item) {
                ele.fieldValue = this.detailInfo.extDataJson[item];
              }
            });
          }
          this.detailInfo.extDataJson = this.formTypeExtendedFields;

          APILX.produceOrderTaskList({
            pageNo: 1,
            pageSize: 1000,
            orderId: id,
          }).then((res2) => {
            if (res2.code == 200) {
              this.taskList = res2.result.records;
              console.log(
                this.taskList,
                "this.taskListthis.taskListthis.taskListthis.taskList"
              );
            }
          });

          APILX.produceOrderReportWorkList({
            pageNo: 1,
            pageSize: 1000,
            orderId: id,
          }).then((res3) => {
            if (res3.code == 200) {
              this.artisanList = res3.result.records;
            }
          });
        } else {
          this.$toast(res.message);
        }
      });
    },
    getTable(tabStatus) {
      let param = {
        id: this.$route.query.id,
        // id: "1517028753530834945",
        status: tabStatus,
        pageNo: "1",
        pageSize: "9999",
      };
      (this.abnormalList = []),
        (this.normalList = []),
        (this.allList = []),
        APILX.getWmsInventoryGoodsList(param).then((res) => {
          if (res.code == 200) {
            this.listData(res.result.records);
            let tableData = res.result.records;
            if (param.status == "abnormal") {
              this.tabAbNormal = res.result.total;
              this.abnormalList = tableData;
            } else if (param.status == "normal") {
              this.tabNormal = res.result.total;
              this.normalList = tableData;
            } else {
              this.allList = tableData;
            }
          } else {
            this.$toast(res.message);
          }
        });
    },
    getimgUrl(v) {
      let itemObj = {};
      for (let item of this.imgUrlList) {
        if (item.id == v) {
          itemObj = item;
        }
      }
      return itemObj.url;
    },
    //获取图片地址
    async listData(v) {
      console.log(v, "列表所有数据2");
      for (let i = 0; i < v.length; i++) {
        await getFileListByIds({ ids: v[i].attachment }).then((res) => {
          if (res.code == 200) {
            if (res.result.length > 0) {
              this.imgUrlList.push({
                url: `${apiBaseUrlDownload}jksaas-mgt/mgt/${res.result[0].uri}`,
                id: v[i].goodsId,
              });
            } else {
              this.imgUrlList.push({
                url: require("../../../assets/img/noPicture.jpg"),
                id: v[i].goodsId,
              });
            }
          } else {
          }
        });
      }
    },
    setColor(item) {
      if (
        Number(item.inventoryGoodsQualifiedNum) > Number(item.goodsQualifiedNum)
      ) {
        return "#ff4d4f";
      } else {
        return "#00b042";
      }
    },
    setColor2(item) {
      if (Number(item.inventoryGoodsScrapNum) > Number(item.goodsScrapNum)) {
        return "#ff4d4f";
      } else {
        return "#00b042";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/views/workManagement/materialRequisition/materialDetail.scss";
.content {
  margin-left: 0 !important;
}
// 盘点物品样式
.no-margin-top{
  margin-top: 0 !important;
}

.column{
  font-size: 28px !important;
}
.margin-t-20{
  margin-top: 20px !important;
}
          .r-column-color {
          color: #191f25;
          /* （超出限定的宽度就隐藏内容) */
          overflow: hidden;
          /* （设置文字在一行显示不能换行） */
          white-space: nowrap;
          /* （规定当文本溢出时显示省略符） */
          text-overflow: ellipsis;
        }
.tabs-box-width{
  width: 100%;
}
.tabs-style{
  width: 600px; 
  margin: 0 0 0 -22px
}
.goodsWrap {
    // margin-top: -0.1rem;
    //   不换行
    // white-space: nowrap;
    overflow: scroll;
    height: 58vh;
    // padding-bottom: 100px;

    .numList {
    // margin-bottom: 22px;
    // margin-top: 0.1rem;
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    font-size: 28px;
  
    .item {
      width: 24%;
      // padding: 30px 0 0 0;
  
      // border-right: 1px solid #F2F2F2;
      .ikey {
        margin-bottom: 20px;
        color: #999999;
      }
  
      p {
        margin-bottom: 0;
      }
    }
  
    .noBorder {
      border-right: none;
    }
  }
  
    //   height: 4.9rem;
    .goodsList {
      .total {
        background: #f5f8ff;
        padding: 30px;
        color: #888888;
        font-size: 28px;
        margin-bottom: -20px;
      }
  
      .goodsBox {
        background: #fff;
        margin-top: 20px;
  
        .title {
          color: #191f25;
          font-weight: bold;
          font-size: 32px;
          border-bottom: 1px solid #f5f5f5;
          padding: 30px;
          margin: 0;
          margin-bottom: 32px;
        }
  
        .content {
          display: flex;
          padding: 32px;
          border-bottom: 1px solid #f5f5f5;
  
          .icon {
            width: 6px;
            height: 32px;
            background: #1890ff;
            margin-top: 6px;
            margin-right: 20px;
          }
  
          .right {
            // width: 2.8rem;
            width: 100%;
  
            // margin-left: 0.15rem;
            .top {
              display: flex;
              font-size: 32px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #191f25;
  
              .code {
                width: 560px;
                margin-bottom: 32px;
                word-break: break-word;
                /* 文本行的任意字内断开 */
  
                word-wrap: break-word;
                /* IE */
  
                white-space: -moz-pre-wrap;
                /* Mozilla */
  
                white-space: -hp-pre-wrap;
                /* HP printers */
  
                white-space: -o-pre-wrap;
                /* Opera 7 */
  
                white-space: -pre-wrap;
                /* Opera 4-6 */
  
                white-space: pre;
                /* CSS2 */
  
                white-space: pre-wrap;
                /* CSS 2.1 */
  
                white-space: pre-line;
                /* CSS 3 (and 2.1 as well, actually) */
              }
  
              img {
                height: 36px;
                margin-top: 6px;
                //   float: right;
              }
            }
  
            .btn {
              display: flex;
              justify-content: flex-start;
              flex-wrap: wrap;
  
              div {
                width: 50%;
  
                .key {
                  font-size: 28px;
                  color: #8888;
                  margin-bottom: 10px;
                }
  
                .val {
                  color: #191f25;
                  font-size: 32px;
                  margin-bottom: 10px;
                }
              }
            }
          }
        }
      }
    }
  
    .addgoods {
      background: #fff;
      font-size: 32px;
      text-align: center;
      height: 100px;
      line-height: 100px;
    }
  }

.left {
  width: 680px !important;
}
.recordDetail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .d-heads {
    padding: 32px 32px 0 32px;
    background: #ffffff;
    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 560px;
        // border: 1px solid red;
        .title {
          font-size: 32px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #191f25;
          line-height: 44px;
          margin-bottom: 32px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .row {
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: 400;
          margin-top: 20px;

          .limitLabel{
           color: #888888;
          }
        }
      }
      .right {
        // border: 1px solid red;
        width: 120px;
        .rightImg {
          display: block;
          width: 110px;
          height: 110px;
          //   margin-left: 0.45rem;
          // border: 1px solid blue;
        }
      }
    }
  }
}
.tabs-f {
  flex: 1;
  overflow-y: auto;
}
.infoTopBox {
  background-color: #fff;
  box-sizing: border-box;
  padding: 32px;
  margin-top: 20px;
  .itemTopInfo {
    position: relative;
    margin-top: 20px;
    font-size: 28px;
    color: #888888;
    display: flex;
    &:nth-child(1) {
      margin-top: 0;
    }
    .spanLeft {
      white-space: nowrap;
    }
    .spanRight {
      flex: 1;
      color: #191f25;
      /deep/.filerows2 {
        padding-bottom: 0;
      }
      /deep/.filerows2:nth-of-type(n + 2) {
        padding-top: 30px;
      }
    }
  }
}
div.infoBotBox {
  background-color: #fff;
  box-sizing: border-box;
  padding: 32px;
  margin-top: 20px;
  div.remarkBox {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 28px;
    color: #888888;
    display: flex;
    margin-bottom: 20px;
    div.leftRemark {
      width: 140px;
    }

    div.rightRemark {
      flex: 1;
      color: #191f25;
    }
  }
}
div.goodBox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 12px 0;
  img.goodLeft {
    width: 110px;
    height: 110px;
    border-radius: 4px;
  }

  div.goodRight {
    flex: 1;
    margin-left: 20pxm;
    div.gooodName {
      width: 90%;
      font-size: 32px;
      font-weight: 500;
      color: #191f25;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-bottom: 20px;
    }

    div.gooodCode {
      position: relative;
      margin-bottom: 20px;
      span.codeBefore {
        font-size: 28px;
        color: #888888;
      }

      span.goodAfter {
        font-size: 32px;
        color: #191f25;
      }
    }

    div.goodSpec {
      margin-bottom: 20px;
      span.specBefore {
        font-size: 28px;
        color: #888888;
      }

      span.specAfter {
        font-size: 32px;
        color: #191f25;
      }
    }

    div.numberBox {
      box-sizing: border-box;
      padding: 20px 0;
      border-top: 20px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div.numTopBox {
        flex: 1;
        div.topTop {
          font-size: 28px;
          color: #888888;
          margin-bottom: 20px;
        }

        div.topBot {
          font-size: 32px;
          color: #191f25;
        }
      }
    }
  }
}
.limitRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  .limitColumn {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    // color: #1890ff;
  }
}
/deep/.van-tabs__line {
  width: 170px;
}
.status {
  margin-right: 20px;
}
// .icon {
//   display: inline-block;
//   width: 6px;
//   height: 28px;
//   background: #1890ff;
//   position: absolute;
//   left: -20px;
//   top: 12px;
// }
.listClass {
  padding: 0 32px 0 32px !important ;
}
.step-title {
  font-size: 32px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #191f25;
}
.step-text {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #888888;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  div {
    word-break: break-all;
  }
  div:nth-child(1n) {
    flex: 1;
  }
  div:nth-child(2n) {
    text-align: right;
  }
}
</style>
